<form nz-form #form="ngForm" (ngSubmit)="form.valid&&userRegister(form)" novalidate class="form-center">
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
            <label nz-form-item-required>用户名</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateStatuErrors.error">
            <nz-input [nzPlaceHolder]="'随便输入'" #userName="ngModel" name="userName" [(ngModel)]="user.userName" required (ngModelChange)="userNameChange($event)"></nz-input>
            <div nz-form-explain *ngIf="form.submitted&&!userName.valid">请输入用户名</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
            <label for="password" nz-form-item-required>密码</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
            <nz-input [nzPlaceHolder]="'随便输入'" name="passWord" #passWord="ngModel" [(ngModel)]="user.passWord"></nz-input>
            <div nz-form-explain *ngIf=false>请输入密码</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
            <label for="checkpassword" nz-form-item-required>确认密码</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <!-- [(ngModel)]="user.passWord" name="confirmPassword" #confirmPassword="ngModel" -->
            <nz-input [nzSize]="'large'" [nzType]="'password'"  [(ngModel)]="confirmPassword" [ngModelOptions]="{standalone:true}"  (ngModelChange)="confirmPasswordChange(passWord)" [nzPlaceHolder]="'随便输入'"></nz-input>
            <div nz-form-explain *ngIf=false>两次输入密码不一致</div>
        </div>
    </div>
    <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
            <label for="phonenumber" nz-form-item-required>联系电话</label>
        </div>
        <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback [nzValidateStatus]="true">
            <nz-input-group [nzSize]="'large'" [nzCompact]="true">
                <nz-select name="phoneNumberPrefix" style="width: 25%;" [(ngModel)]="selectedOption">
                    <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
                    <nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>
                </nz-select>
                <input name="phoneNumber" #phoneNumber="ngModel" [(ngModel)]="user.phoneNumber" nz-input style="width: 75%;">
            </nz-input-group>
            <div nz-form-explain *ngIf=false>请输入手机号</div>
        </div>
    </div>
    <div nz-form-item nz-row style="margin-bottom:8px;">
        <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
            <label nz-checkbox name="agree">
        <span>我已阅读 <a>协议</a></span>
      </label>
        </div>
    </div>
    <div nz-form-item nz-row style="margin-bottom:8px;">
        <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="6">
            <button nz-button [nzSize]="'large'" [nzType]="'primary'">注册</button>
        </div>
    </div>
</form>